<template>
  <div>
    <sec-input
      v-model="verificationCode"
      placeholder="请输入验证码"
      class="input-with-select"
      :class="['select-auto-adjust', !countdown ? 'long-wth' : 'narrow-wth']"
      @input="change"
    >
      <sec-select
        slot="prepend"
        v-model="verificationCodeType"
        placeholder="验证方式"
        :style="{ width: '97px' }"
      >
        <sec-option
          v-for="item in verifyTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></sec-option>
      </sec-select>
      <div
        slot="append"
        :class="[{ disable: !canSend }, 'form-verification-btn']"
        @click="fetchVerify"
      >
        <span v-if="!countdown">获取验证码</span>
        <em v-else>
          <i>{{ awaitSecond }}</i>
          <i>s</i>
        </em>
      </div>
    </sec-input>
  </div>
</template>
<script>
import { verifyMixin } from './../mixin/verify'

const MAX_SECOND = 60
const MIN_SECOND = 0

export default {
  name: 'EmsVerification',
  mixins: [verifyMixin],
  props: {
    change: {
      type: Function,
      default: () => {}
    },
    rewrite: {
      type: Function,
      default: () => {}
    },
    refreshCode: {
      type: Function,
      default: () => {}
    },
    tabKey: {
      type: String,
      default: ''
    },
    loginTab: {
      type: String,
      default: ''
    },
    appCode: {
      type: String,
      default: ''
    },
    domain: {
      type: String,
      default: ''
    },
    randomStr: {
      type: String,
      default: ''
    },
    verifyTypeList: {
      type: Array,
      default: function () {
        return []
      }
    },
    form: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      verificationCode: '',
      verificationCodeType: '',
      // 验证码发送成功之后回显到上级
      verifyCodeId: '',
      countdown: false,
      awaitSecond: MAX_SECOND
    }
  },
  computed: {
    canSend() {
      return (
        (this.awaitSecond === MIN_SECOND || this.awaitSecond === MAX_SECOND) &&
        this.form.username &&
        this.form.code
      )
    }
  },
  mounted() {},
  created() {
    this.verificationCodeType = this.verifyTypeList.length
      ? this.verifyTypeList[0].value
      : ''
  },
  methods: {
    startAwait() {
      this.awaitSecond = MAX_SECOND
      let timer = null

      const fn = () => {
        if (this.awaitSecond <= MIN_SECOND) {
          clearTimeout(timer)
          this.countdown = !this.countdown
          return
        }

        this.awaitSecond--

        timer = setTimeout(() => {
          fn()
        }, 1 * 1000)
      }

      fn()
    },
    async fetchVerify() {
      if (!this.canSend) {
        console.log(`[ await ${this.awaitSecond} ] ......`)
        return
      }

      this.sendVerification()
    }
  }
}
</script>
<style lang="scss" scope>
.form-verification-btn {
  display: inline-block;
  width: 58px;
  text-align: center;
  font-size: 12px;
  color: #3366ff;
  cursor: pointer;
  height: 38px;
  line-height: 38px;
  -moz-user-select: none;
  /*火狐*/
  -webkit-user-select: none;
  /*webkit浏览器*/
  -ms-user-select: none;
  /*IE10*/
  -khtml-user-select: none;
  /*早期浏览器*/
  user-select: none;

  & > span:hover {
    color: #5678de;
  }

  & > em {
    font-style: normal;
    font-size: 14px;

    & > i {
      &:first-child {
        color: #36f;
        margin-right: 1px;
      }

      font-style: normal;
      // color: #959595;
      color: #36f;
    }
  }
}

.form-verification-btn.disable {
  color: #ccc;
  cursor: not-allowed;
}

.input-with-select.select-auto-adjust {
  &.narrow-wth .el-input-group__append {
    background: #e6eaf1;
  }
}
</style>
